<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/plugins/layuimini/css/public.css}" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row">
            <div class="layui-col-xs12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <i class="fa fa-line-chart icon"></i>
                        报表统计
                        <div>
                            <select name="city" lay-verify="required">
                                <option value=""></option>
                                <option value="0">北京</option>
                                <option value="1">上海</option>
                                <option value="2">广州</option>
                                <option value="3">深圳</option>
                                <option value="4">杭州</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div id="chart" style="height: 45rem"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/plugins/layui/layui.js}" charset="utf-8"></script>
<script th:inline="javascript">
    layui.config({
        base: "plugins/",
        version: true
    }).extend({
        layplugin: 'layplugin/layplugin',
        echarts: 'echarts/echarts',
        echartsTheme: 'echarts/echartsTheme', // echarts图表主题扩展
    }).use(['form', 'echarts', 'layplugin'], function () {

        let $ = layui.jquery,
            form = layui.form,
            echarts = layui.echarts,
            layPlugin = layui.layplugin;

        let showData = function () {
            layPlugin.chart.showLoading(echarts, "chart");
            $.ajax({
                type: 'POST',
                url: 'baseline',
                dataType: "json",
                data: JSON.stringify({
                    "factors": 1,
                    "histories": 30,
                    "aggregationType": 1
                }),
                contentType: 'application/json',
                cache: false
            }).done(function (e) {
                let obj = {};
                obj.xData = [];
                obj.datas = [];
                if (!!e.times && !!e.times.length > 0) {
                    obj.xData = e.times;
                    obj.datas = [{
                        name: '历史数据',
                        datas: !!e.historyDataList ? e.historyDataList : [],
                    }];
                    layPlugin.chart.showChart(echarts, 'chart', layPlugin.chart.initLineOption(echarts, obj, 'G', false))
                } else {
                    layPlugin.chart.showNoData(echarts, 'chart');
                }
            });
        };

        showData();

    });
</script>
</body>
</html>